<template>
  <section :class="[ns.b(), ns.is('vertical', isVertical)]">
    <slot />
  </section>
</template>

<script lang="ts" setup>
import { computed, useSlots } from 'vue'
import { useNamespace } from '@element-plus/hooks'
import { buildProps } from '@element-plus/utils'

import type { Component, VNode } from 'vue'

defineOptions({
  name: 'ElContainer',
})

const props = defineProps(
  buildProps({
    /**
     * @description layout direction for child elements
     */
    direction: {
      type: String,
      values: ['horizontal', 'vertical'],
    },
  } as const)
)
const slots = useSlots()

const ns = useNamespace('container')

const isVertical = computed(() => {
  if (props.direction === 'vertical') {
    return true
  } else if (props.direction === 'horizontal') {
    return false
  }
  if (slots && slots.default) {
    const vNodes: VNode[] = slots.default()
    return vNodes.some((vNode) => {
      const tag = (vNode.type as Component).name
      return tag === 'ElHeader' || tag === 'ElFooter'
    })
  } else {
    return false
  }
})
</script>
